The creation of the animation

Part 3.

Other parts:

	1. The GIF-format. The application and features.
	2. The GIF87a and GIF89a standards.
	4. The animated GIF-file optimization.

The animated GIF-imaging is based on one of the eldest animation principles - fast changing of the pictures that slightly differ one from another. As a rule all animated GIF-files contain a series of separate frames, the sequential playback of which gives a motion illusion. Nowadays the animated GIF-images are mostly popular in the simple Web-page animation, because almost each browser supports such images. But one should remember that some user's browsers do not support animated GIF, thus showing just the first element of a graphic chain.
The creation process of GIF-based animation consists of three steps:
- preparation of separate frames (with digitizing and drawing);
- composing the separate frames to one file;
- setting the output loop extents, delay periods between the frames and other information.

The frame preparation
The basic frames are imaged in any graphic editor and are saved in GIF-format. The frames are created approximately in the same way as an ordinary animation.
Let's look through each step of GIF-animation creation, using two typical examples.
Picture one - the horse that opens and closes his eyes.
Picture two - the jumping ball.
In the first case we'll need 3 initial frames: the horse with his eyes open, semiclosed, and closed.

In this case all 3 frames differ one from another and the GIF-file's creation is based on the classic animation principle.
In the second case we need two initial frames: the ball and the background (frame).

In both cases we strongly recommend to draw a pattern, respecting your idea - file, containing the image of a fixed size with the applied stationary background, that may be monochrome or textured, upon which the motion object is going to move.

Frame composing
In the animated GIF-files the frames are screened in a restricted sequence, that cannot be changed while playback is on.
The animation is being composed from frames prepared in any specialized and designed for this operation application. The process of creating is simple - you take your frames one by one and add them to your GIF-file. Then you set parameters for each frame and the animation as a whole. For each frame you set delay time period, a local color palette (if needed), location on the logical screen and the way of the removal.

Frame parameters

- Delay period.

The GIF89a format allows setting the delay period between separate frames (counted with 0.01 sec with (1msec) pitch), that enables to manipulate the animation speed. Delay period - is a period of time when the frame is being screened. Not considering the aesthetic meanings, in most cases the animation slowing down (or speeding up) allows reducing the number of frames in a file. But one should remember that some browser versions do not playback the frames faster than with a 34/100-sec delay.

- Location in the logical screen.

The downward and left shift relatively to the logical screen grid origin is available for each frame. This feature in most cases substantially influences the file size optimization.

- The current frame removal mode.

4 modes of the current frame removal are provided by the GIF-format.
- Not selected. The removal mode is not selected. In most cases it is identical to "do not remove".
- Do not remove. The frame is to stay in its current location. It means that the next frame is to be mapped over the current image. This mode is not available in the transparent animation.
- Background color. The recovery of the background color. The area, covered with the frame is to be filled with the background color. But if at least one frame is transparent, than the frame is going to be replaced with the background image (background image is the first image of the frame chain).
- The previous state. The recovery of the previous image. The area, covered with the frame is to be replaced with the previous image.
In most cases first two modes mean that the frames are not going to disappear from the screen and are going to be mapped over the previous frames. And the two last modes mean that the previous frames are to be removed and only the current frame is to be screened.

- Local color palette.

A local color palette may be set for each frame. But one should remember that the local color palettes are not desirable to use - the gained images are read, but in some cases it may lead to an invalid color display. Moreover the local color palette increases the file size.

- Transparency.

The transparent color from the current color palette may be set for the frame. Only one color may be set transparent.

Animation parameters

- The number of iterations of the frame series.

The image sequence iteration may be infinite or set to a certain number. In most cases the infinite iteration loop is used.

- The x- and y-extent of the logical screen.

The x- and y-extents of the screen may be clearly set in GIF-file, or the automatic setting of the screen size may be used. In the last case all frames are to fit the screen. But one should remember that if the image doesn't fit the logical screen, it may lead to a browser program crash, at best - the consequences are unpredictable.

- The global color palette.

It is recommended to use the global color palette for the animation as a whole.

Now let's look trough some substantial theory thesis in practice and try to experiment with our workpieces.

Nodding horse.
To make a horse to open and close his eyes we need to position the frames in a sequence of 1, 2, 3, 2, that is the frame with open eyes, the frame with semiclosed eyes, the frame with closed eyes, again the frame with semiclosed eyes, the frame with open eyes etc…
If the picture comes opaque, we can use any removal mode. If the picture is transparent then the removal mode has a principle meaning. In the first case the removal mode for each frame is "do not remove", in second - "the previous state". In all cases the delay period between the frames is the same and makes 100 msec.


A horse with an opaque background.	A horse with a transparent background. The removal mode is "do not remove".

A horse with a transparent background. The removal mode is "the previous state".

If the delay period for the first frame is set on, for example, 300 msec, the horse will seem more cheerful. But if the delay period is set for the 3rd frame, the horse vise versa seems sleepy.

A cheerful horse. A sleepy horse.

By varying the delay period between the frames you may obtain certain psychological and aesthetic elements.

A ball.
Let's take up a ball example, a more typical case, because the Internet animation is mostly based on an object motion.
Let the ball bounce off the box's walls, in which it is put. In this case we have two initial frames: a background box and a ball. When imaging the animation chain, for the first frame we'll put a box and then - a ball. But when imaging the 2nd and the following frames we'll use a very important frame feature - the right and left shift. When preparing this type of a GIF-file one should take into consideration that the motion object is to be shifted equidistantly and it should be shifted in the same direction in the each frame produced. If for example the ball is to move along the straight line, and in one of the frames you put it a bit higher or lower the initial location, the motion path will become broken, that will spoil the effect.
Let's image a GIF-file of 10 frames with delay period of 50 msec. All frames but the first lets make transparent. The removal mode of the first frame let's set on "do not remove", while the other frames get the "previous state" removal mode and the each frame's shift is going to be: 1- (0,0); 2- (23,23) etc…

Picture1
A ball upon the background bounces off the walls. The removal mode is "Previous state".

If to change the sequence of the frames with the same shift, the ball is going to confusedly appear in different places.

Picture2
A ball appears in random places.

If we do not remove the frames in previous two cases, then we get a quite different effect.

Picture3
A ball moves along the motion path with a loop.

Picture4
The balls appear and do not disappear.

In most cases the background is not needed - the same effects may be acquired without the background that is without the first frame. For all the frames the removal mode is the same.

As a result of our experiments we get 8 different pictures from just 2 files by adding minimum changes.

Image Tools Group 2004.

Home / Previous part / Next part / Back to top

	Picture1 A ball upon the background bounces off the walls. The removal mode is "Previous state".
If to change the sequence of the frames with the same shift, the ball is going to confusedly appear in different places.
	Picture2 A ball appears in random places.
If we do not remove the frames in previous two cases, then we get a quite different effect.
	Picture3 A ball moves along the motion path with a loop.
	Picture4 The balls appear and do not disappear.
In most cases the background is not needed - the same effects may be acquired without the background that is without the first frame. For all the frames the removal mode is the same.